<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>确认订单</title>
    <link rel="stylesheet" href="css/vant.css">
    <link rel="stylesheet" href="css/submitOrder.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="addressBox">
            <template v-if="userInfo.userName!=''">
                <div>
                    <span>{{userInfo.userName}}</span>
                    <span>{{userInfo.telNumber}}</span>
                </div>
                <div>
                    {{userInfo.address}}
                </div>
            </template>
            <template v-else>
                <div class="addressTip" @click="gatAddress">
                    点击设置收货地址
                </div>
            </template>
        </div>

        <div class="productInfo">
            <div class="proInfo">
                <img :src="path+'product/product_'+order.product.productId+'/'+ order.product.productPic" alt=""
                    class="proImg">
                <div class="goodI">
                    <div>{{order.product.productName}}</div>
                    <div>规格:{{order.formart.formartName}}</div>
                    <div>￥{{order.formart.formartPrice}}</div>
                    <div>X{{order.chooseNum}}</div>
                </div>
            </div>
            <!-- 具体内容 -->
            <div class="moneyBox">
                <div>
                    <span>商品总额：</span>
                    <span>￥{{order.totalMoney.toFixed(2)}}</span>
                </div>
                <div>
                    <span>实付金额：</span>
                    <span>￥{{order.totalMoney.toFixed(2)}}</span>
                </div>
            </div>
        </div>
        <div class="subtnBox">
            <div class="priceBox">
                <span>共计{{order.chooseNum}}件，</span>
                <div>合计: <span>￥{{order.totalMoney.toFixed(2)}}</span> </div>
            </div>
            <div @click="addOrder">立即支付</div>
        </div>

        <div class="addressDia" v-if="isShowAddress">
            <div class="addBox">
                <div class="addTitle">
                    收货信息
                </div>
                <div class="addCon">
                    <div>
                        <span>收件人</span>
                        <input type="text" placeholder="请输入收件人" v-model="userInfo.userName">
                    </div>
                    <div>
                        <span>收件电话</span>
                        <input type="text" placeholder="请输入收件电话" v-model="userInfo.telNumber">
                    </div>
                    <div>
                        <span>地址</span>
                        <input type="text" placeholder="请输入收货地址" v-model="userInfo.address">
                    </div>
                </div>
                <div class="addbtnBox">
                    <div @click="isShowAddress=false">取消</div>
                    <div @click="addressConfirm">确认</div>
                </div>
            </div>
        </div>
        <!-- 支付成功 弹窗 开始 -->
        <div class="successDialog" v-if="payStatus">
            <div class="topBox">
                <img src="img/distribution/successimg.png" alt="">
                <span>支付成功</span>
                <span>您的订单可在APP内查看</span>
                <div @click="downHandle">立即下载</div>
            </div>
            <div class="bgBox">
                <div class="titleBox">
                    <span>分享赚好礼</span>
                    <span>天天送不停</span>
                </div>
            </div>
            <div class="lineBox">
                <img src="./img/distribution/line.png" alt="">
                <div>
                    <span>转发抽奖</span>
                    <span>上传朋友圈截图</span>
                </div>
            </div>
            <div class="jiangBox">
                <div class="jaingMain">
                    <div v-for="(item,index) in jianglist" key="index">
                        <span>{{item.shareDate.split(' ')[0]}}</span>
                        <span>{{item.userName}}</span>
                        <span>成功提现</span>
                        <span>{{item.shareMoney}}¥</span>
                    </div>
                </div>
            </div>
            <div class="ruleBox">
                <div class="ruleTitle">
                    ·详细规则·
                </div>
                <div class="tipList">
                    <div class="tipItem">
                        <div v-html="rulesObj.shareText"></div>
                    </div>
                </div>
            </div>
            <img src="img/distribution/btnImg.png" @click="downHandle" class="btnImg" alt="">
        </div>
        <!-- 支付成功 弹窗 结束 -->

        <div class="mask" v-if="mask">
            <img src="img/load.gif">
        </div>
    </div>

    <script src="js/vue.min.js"></script>
    <script src="js/flex_ible/lib-flexible.js"></script>
    <script src="js/vue-lazyload.js"></script>
    <script src="js/vant.min.js"></script>
    <script src="js/vue-lazyload.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ajax.js"></script>
    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        Vue.use(VueLazyload);
        var vm = new Vue({
            el: "#app",
            data: {
                mask: false,
                order: '',
                userInfo: {
                    userName: '',
                    telNumber: '',
                    address: '',
                },
                payStatus: false,
                rulesObj: {},
                jianglist: [],
                isShowAddress: false,
                proShopId: 0,  //当前商品的shopId

                zongShopId: '', // 总店id
                zongShop: '', //总店信息
                fenShop: '', //分店信息

                homeShopRatio: '',//总店返利比率
                boyShopRatio: '',//分店返利比率
                userRatio: '',//业务员返利比率
                shopUser: '',// 当前门店的业务员ID
                isFen: true,//是否为分店

                money: 800,// 预约支付金额

                myYuYueObj: '',
                oxId: 0,
                baojianShop: false,
                isHaveCopuon: false,// 是否有优惠券

                delMoney: 0,//抵扣金额
            },
            created() {
                this.order = JSON.parse(sessionStorage.order)
                console.log(this.order);

                this.proShopId = this.order.product.shopId
                console.log(this.proShopId);

                this.getRules()
                this.getList()
                this.getShopType()
            },
            methods: {
                getShopType() {
                    var _this = this;
                    _this.isShow = true
                    ajax({
                        url: newUrl + 'care/getCareShopFlag',
                        type: 'post',
                        data: {
                            shopId: sessionStorage.shopId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            _this.isShow = false
                            if (res.flag) {
                                console.log(res);
                                if (res.data.homeShop == null && res.data.homeShopName == null && res.data.boyShop == null) {
                                    _this.baojianShop = false
                                } else {
                                    _this.baojianShop = true
                                    _this.getPerent()
                                }
                                console.log(_this.baojianShop);

                                if (res.data.homeShopName != null) {
                                    // 总店
                                    _this.isFen = false
                                    console.log('总店');
                                    _this.zongShopId = sessionStorage.shopId
                                    _this.zongShop = JSON.parse(sessionStorage.shop)
                                } else if (res.data.homeShop != null) {
                                    // 分店
                                    console.log('分店');
                                    _this.zongShopId = res.data.homeShop[0].shopId
                                    _this.zongShop = res.data.homeShop[0]
                                    _this.fenShop = JSON.parse(sessionStorage.shop)
                                }
                                console.log(_this.zongShopId);
                                console.log(_this.zongShop);
                                _this.getShopUser()
                            }

                        }
                    })
                },
                getPerent() {
                    var _this = this;
                    _this.isShow = true
                    ajax({
                        url: newUrl + 'care/getCareRule',
                        type: 'post',
                        data: {},
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            _this.isShow = false
                            if (res.flag) {
                                console.log(res);
                                res.data.forEach(item => {
                                    if (item.flag == 3) {
                                        _this.homeShopRatio = item.content
                                    } else if (item.flag == 2) {
                                        _this.boyShopRatio = item.content
                                    } else if (item.flag == 4) {
                                        _this.userRatio = item.content
                                    }
                                })
                            }
                        }
                    })
                },
                getShopUser() {
                    var _this = this;
                    _this.isShow = true
                    ajax({
                        url: newUrl + 'care/getCareShop',
                        type: 'post',
                        data: {},
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            _this.isShow = false
                            if (res.flag) {
                                console.log(res);
                                res.data.forEach(ele => {
                                    if (_this.isFen) {
                                        if (ele.boyShop == sessionStorage.shopId) {
                                            _this.shopUser = ele.userId
                                        }
                                    } else {
                                        if (ele.homeShop == sessionStorage.shopId) {
                                            _this.shopUser = ele.userId
                                        }
                                    }
                                });
                                console.log(_this.shopUser);

                            }
                        }
                    })
                },



                addressConfirm() {
                    if (this.userInfo.userName == '') {
                        this.$toast('请输入收件人')
                        return
                    } else if (this.userInfo.telNumber == '') {
                        this.$toast('请输入收件电话')
                        return
                    } else if (this.userInfo.address == '') {
                        this.$toast('请输入收件地址')
                        return
                    }

                    console.log(this.userInfo);


                    this.isShowAddress = false
                },
                addOrder() {
                    if (this.userInfo.userName == '') {
                        this.$toast('请输入收件人')
                        return
                    } else if (this.userInfo.telNumber == '') {
                        this.$toast('请输入收件电话')
                        return
                    } else if (this.userInfo.address == '') {
                        this.$toast('请输入收件地址')
                        return
                    }

                    this.mask = true
                    var that = this;
                    ajax({
                        type: "post",
                        url: newUrl + "order/addWxOrder",
                        data: {
                            userId: sessionStorage.userId,
                            shopId: sessionStorage.shopId,
                            shareId: sessionStorage.shareId,
                            productId: that.order.product.productId,
                            num: that.order.chooseNum,
                            productPrice: that.order.formart.formartPrice,
                            formatId: that.order.formart.formartId,
                            totalNum: that.order.totalMoney,
                            addressDetail: that.userInfo.address,
                            addressName: that.userInfo.userName,
                            addressTel: that.userInfo.telNumber,
                            productName: that.order.product.productName,
                            productPic: that.order.product.productPic,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            if (res.flag) {
                                that.mask = false
                                that.payHandle(res.data)
                                console.log(res);
                            }
                        }
                    })
                },


                payHandle(obj) {
                    this.mask = true
                    var that = this;
                    ajax({
                        type: "post",
                        url: newUrl + "pay/wxPay",
                        data: {
                            openId: sessionStorage.openId,
                            shareId: sessionStorage.shareId,
                            totalMoney: that.order.totalMoney,
                            // totalMoney: 0.01,
                            userId: sessionStorage.userId,
                            orderNum: obj.orderNum,
                            fenxiangMoney: obj.fenxiaoMoney,
                            flag: 0,
                            shopId: that.proShopId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            console.log(res);
                            var res = JSON.parse(res)
                            if (res.flag) {
                                that.mask = false
                                console.log(res);
                                onBridgeReady(res.data)
                            }
                        }
                    })
                },

                addOXHandle() {
                    var _this = this;
                    _this.homeShopRatio = _this.isFen ? _this.homeShopRatio : _this.homeShopRatio * 2
                    _this.userRatio = _this.isFen ? _this.userRatio : 0
                    ajax({
                        url: newUrl + 'care/addNotCareOrder',
                        type: 'post',
                        data: {
                            userId: sessionStorage.userId,
                            userName: JSON.parse(sessionStorage.user).userName,
                            userTel: '',
                            scheduledTime: '',
                            money: _this.order.totalMoney,
                            state: 1,
                            number: 1,
                            homeShop: _this.zongShopId,
                            homeShopName: _this.zongShop.shopName,
                            homeShopRatio: _this.homeShopRatio / 100,
                            boyShop: _this.isFen ? sessionStorage.shopId : -1,
                            boyShopName: _this.isFen ? _this.fenShop.shopName : '',
                            boyShopRatio: _this.boyShopRatio / 100,
                            shopUser: _this.shopUser,
                            userRatio: _this.userRatio / 100,
                            spare: _this.zongShopId,
                            yl: 0
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            if (res.flag) {
                                console.log(res);
                                // _this.userCode = res.data
                                // _this.isShow = false
                                // _this.successFlag = true;
                            } else {
                                // _this.$toast('预约失败，请重试')
                            }
                        },
                    })
                },

                // 获取地址
                gatAddress() {
                    // if (mui.os.ios) {
                    //     this.isShowAddress = true
                    // } else {
                    var _this = this;
                    _this.mask = true
                    var url = location.href.split('#')[0];
                    ajax({
                        type: "post",
                        url: newUrl + "share/share",
                        data: {
                            url: url
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (data) {
                            var res = JSON.parse(data)
                            console.log(res)
                            var datas = res.data
                            _this.mask = false;
                            wx.config({
                                debug: false,
                                appId: datas.appId,
                                timestamp: datas.timestamp,
                                nonceStr: datas.nonceStr,
                                signature: datas.sign,
                                jsApiList: [
                                    'checkJsApi',
                                    'openAddress'
                                ]
                            });

                            wx.ready(function () {
                                wx.openAddress({
                                    success: function (res) {
                                        var str = res.provinceName + res.cityName + res.countryName + res.detailInfo
                                        _this.userInfo = {
                                            userName: res.userName,
                                            telNumber: res.telNumber,
                                            address: str,
                                        }
                                    }
                                });
                            })
                            wx.error(function (res) {
                                // alert(JSON.stringify(res))

                            })
                        }
                    })
                    // }




                },

                getRules() {
                    var that = this;
                    that.isShow = true
                    ajax({
                        url: newUrl + "fenxiao/listShareRule",
                        type: 'post',
                        data: {
                            flag: 0,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (data) {
                            var data = JSON.parse(data);
                            console.log(data);
                            that.isShow = false;
                            if (data.flag) {
                                console.log(data);
                                that.rulesObj = data.data.rules[0];
                            }
                            console.log(that.rulesObj);
                        },
                    })
                },

                getList() {
                    var that = this;
                    that.isShow = true
                    ajax({
                        url: newUrl + "fenxiao/listShareRule",
                        type: 'post',
                        data: {
                            flag: 1,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (data) {
                            var data = JSON.parse(data);
                            console.log(data);
                            that.isShow = false;
                            if (data.flag) {
                                console.log(data);
                                that.jianglist = data.data.shareList
                            }
                        },
                    })
                },
                // 立即下载
                downHandle() {
                    window.location.replace("newDown.html")
                },
            }
        })


        function wxPayHandle() {
            // 检测支付环境中的 WeixinJSBridge
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
        }

        function onBridgeReady(data) {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                "appId": data.appId, //公众号名称，由商户传入
                "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
                "nonceStr": data.nonceStr, //随机串
                "package": data.package,
                "paySign": data.paySign, //微信签名
                "signType": data.signType //微信签名方式：
            },
                function (res) {
                    // 支付成功
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        vm.payStatus = true
                        alert('支付成功')
                        if (vm.baojianShop) {
                            vm.addOXHandle()
                        }
                    }
                    // 支付过程中用户取消
                    if (res.err_msg == "get_brand_wcpay_request:cancel") {
                        alert('已取消支付')
                    }
                    // 支付失败
                    if (res.err_msg == "get_brand_wcpay_request:fail") {
                        alert('支付失败')
                    }
                    if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {
                    }
                });
        }

    </script>

</body>

</html>